<template>
  <div class="bottom-[20px] z-10 left-1/2 transform -translate-x-1/2 fixed">
  <el-button :type="isActive == 'primitive' && 'primary'"   @click="handlePrimitive">primitive</el-button>
  <el-button :type="isActive == 'entity' && 'primary'" @click="handleEnity">entity</el-button>
  </div>
  <div id="muiltLineViewer"></div>


</template>

<script setup>
import { onMounted, onUnmounted, ref } from "vue";
import { KyViewer } from "@/plugins/cesium/index.js";
import { PolylineTrailLinkMaterialPropertyRoad } from "@/plugins/cesium/material/flowRow.js";
import img4 from "@/plugins/cesium/material/row4.png";
import source from "@/plugins/cesium/material/source.glsl?raw";

const testData = [
  [
    [112.29465, 30.21764],
    [112.29445, 30.217503],
  ],
  [
    [112.294921875, 30.2177748444],
    [112.29748929, 30.216971288],
  ],
];

// 在外面配置好些，不然要调用很多次材质创建
// 创建材质实例
const trailMaterial = new Cesium.PolylineTrailLinkMaterialProperty({
  color: Cesium.Color.fromCssColorString("#00FFFC"), // 设置颜色
  duration: 1000, // 设置动画持续时间(毫秒)
});

const arrowProperty = new Cesium.PolylineArrowMaterialProperty(
  Cesium.Color.fromCssColorString("#0cfd11"),
);
let positions = [];
let isActive = ref("");
const loading = ref(true);
let viewer = null;

onMounted(() => {
  initMap();
});

function handleEnity() {
  if (isActive.value !== "entity") {
    console.time("entity");
    console.log("pos", positions, viewer.entities.values);
    isActive.value = "entity";
    viewer.entities.suspendEvents();
    viewer.scene.primitives.removeAll();
    // debugger;
    // viewer.entities.add({
    //   polyline: {
    //     positions: positions[0],
    //     width: 10,
    //     material: new PolylineTrailLinkMaterialPropertyRoad({
    //       color: Cesium.Color.fromCssColorString("#00FFFC"),
    //       duration: 1000,
    //       repeatCount: 16.21564,
    //     }),
    //   },
    // });
    // viewer.entities.add({
    //   polyline: {
    //     positions: positions[1],
    //     width: 10,
    //     material: new PolylineTrailLinkMaterialPropertyRoad({
    //       color: Cesium.Color.fromCssColorString("#00FFFC"),
    //       duration: 1000,
    //       repeatCount: 1.44861565,
    //     }),
    //   },
    // });

    positions.forEach((pos) => {
      const distance = Cesium.Cartesian3.distance(pos[0], pos[1]);
      const repeatCount = distance / 20;
      // console.log(pos, distance, repeatCount);

      viewer.entities.add({
        polyline: {
          positions: pos,
          width: 10,
          scaleByDistance: new Cesium.NearFarScalar(1000, 1.0, 21300, 0.1),
          material: new PolylineTrailLinkMaterialPropertyRoad({
            color: Cesium.Color.fromCssColorString("#00FFFC"),
            duration: 1000,
            repeatCount: repeatCount,
          }),
        },
      });
    });
    viewer.entities.resumeEvents();
    console.timeEnd("entity");
  } else {
    isActive.value = false;
    // 正确的清理方式
    viewer.entities.suspendEvents();
    viewer.entities.removeAll();
    viewer.entities.resumeEvents();
  }
}

function handlePrimitive() {
  if (isActive.value != "primitive") {
    console.time("primitive");
    isActive.value = "primitive";
    console.log("pos", positions, viewer.entities.values);

    viewer.entities.removeAll(true);
    const polyLinesGeo = [];
    positions.forEach((pos) => {
      polyLinesGeo.push(
        new Cesium.GeometryInstance({
          geometry: new Cesium.PolylineGeometry({
            positions: pos,
            width: 10.0,
          }),
        }),
      );
    });

    var polylineAppearance = new Cesium.PolylineMaterialAppearance({
      // material: Cesium.Material.fromType("Color", {
      //   color: new Cesium.Color(1.0, 1.0, 0.0, 1.0),
      // }),
      material: new Cesium.Material({
        fabric: {
          type: "PolylineTrailLinkMaterialType",
          uniforms: {
            color: new Cesium.Color(0.0, 1.0, 1.0, 0.8), // 青色 #00FFFC
            image: img4,
            time: 0,
            repeatCount: 10,
          },
          source: source,
        },
        translucent: true,
      }),
    });

    // //创建Primitive
    var addPolylineGeometry = new Cesium.Primitive({
      geometryInstances: polyLinesGeo,
      appearance: polylineAppearance,
    });
    viewer.scene.primitives.add(addPolylineGeometry);
    console.timeEnd("primitive");
  } else {
    viewer.scene.primitives.removeAll();
    isActive.value = false;
  }
}

async function initMap() {
  viewer = new KyViewer("muiltLineViewer", {
    sceneMode: Cesium.SceneMode.SCENE2D,
  });
  viewer.scene.debugShowFramesPerSecond = true;

  viewer.camera.flyTo({
    destination: Cesium.Cartesian3.fromDegrees(112.2974, 30.2176, 2000),
  });
  // positions = testData.map((item) => {
  //   return Cesium.Cartesian3.fromDegreesArray(item.flat(1));
  // });

  fetch("/zhugandao.json")
    .then((res) => {
      return res.json();
    })
    .then((data) => {
      positions = data.map((item) => {
        return Cesium.Cartesian3.fromDegreesArray(item.flat(1));
      });
      console.log("返回", data, positions);

      // loading.value = false;
    });
}

onUnmounted(() => {
  viewer.destroy();
});
</script>

<style scoped>
#muiltLineViewer{
  width: 100%;
  height: 100vh;
}
#heatmap {
  width: 500px;
  height: 500px;
}
</style>
